<template>
	<view>
		<view class="top">
			<!-- <image src="../../static/img/banner.png" mode=""></image> -->
			<image v-if="productData.imgLoaded" :src="getImgUrl(productData.imageUrl)" mode="scaleToFill" ></image>
			<image v-if="!productData.imgLoaded" src="/static/images/load_fial_image.png" mode="scaleToFill"/>
		</view>
		<view class="mid">
			<view class="mid-top">
				<view class="mid-top-top">
					<view class="money">￥{{productData.pricePerMonth}}/月</view>
					<text>主机</text>
				</view>
				<text>{{productData.description}}</text>
			</view>
			<!-- <view class="mid-bottom" v-if="productId==1">
				<view class="mid-bottom-content">
					<text>赠送</text>
					<view class="content">
						<text class="content-blue">购买两年以上，免费赠送</text>
						<text class="content-red" @tap="present">《华城影视体验包》</text>
					</view>
				</view>
			</view> -->
		</view>
		<view class="section">
			<view class="section1">
				<text class="word">产品名称</text>
				<text class="name">{{productData.productName}}</text>
			</view>
			<view class="section1">
				<text class="word">所属网络</text>
				<text class="name">{{productData.netName}}</text>
			</view>

		</view>
		<view class="section2">
			<text class="word">包含频道</text>
			<view class="include">
				<view v-for="(item,index) in productData.serviceIncluded" :key="index">
					<text class="title">{{item.serviceName}}</text>
				</view>
			</view>
		</view>
		<view class="buy-now-layout">
			<button  :disabled='isAddShoppingCart' v-if="isAddShoppingCart" style="background-color:#cdcdcdcolor:#999;border-color:#cdcdcd"  class ='add-shoping-cart' hover-class='add-shoping-cart-hover' @tap='addShopingCart'>
				{{isAddShoppingCart?"已加入购物车":"加入购物车"}}
			</button>
			<button  :disabled='isAddShoppingCart' v-else class ='add-shoping-cart' hover-class='add-shoping-cart-hover' @tap='addShopingCart'>
				{{isAddShoppingCart?"已加入购物车":"加入购物车"}}
			</button>
			
			<button class="immediately-buy-now" hover-class="immediately-buy-now-hover" @tap="immediatelyBuyNow">立即购买</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex' //导入vuex的mapState和mapMutations方法
	import apis from '../../api.js'
	import httpRequest from '@/utils/utilHttp.js'
	
	export default {
		data() {
			return {
				productId: '',
				car: 1,
				isAddShoppingCart:false,
				shoppingCarts: {}, // 购物车数据

				productData: {},
				productImages:{},
				where:0
			}
		},
		computed: {
			...mapState(['userInfo', 'buyCarList']), //对全局变量进行监控
		},
		onLoad(option) {
			console.log('businessDetails loading....')
			var that = this
			//console.log(option)
			//console.log(this.buyCarList)
			that.productId = option.productId
			that.productData = JSON.parse(decodeURIComponent(option.itemList))
			var shoppingCarts = uni.getStorageSync('shoppingCart');
			if(shoppingCarts){
				console.log(shoppingCarts)
				for(var i = 0; i < shoppingCarts.length; i++) {
					if(shoppingCarts[i].productId === that.productId) {
						that.isAddShoppingCart = true;
						break;
					}
				}
			}
			else{
				console.log('shopingCarts is empty...')
			}

			that.productData.imgLoaded = that.firstLoadImagUlr(that.productData.imageUrl);
			that.shoppingCarts = shoppingCarts;
		},
		methods: {			
			immediatelyBuyNow() {
				let that = this
				var productDatas = new Array()
				productDatas.push(that.productData)
				
				uni.navigateTo({
					url: '../ensureorder/ensureorder?productDatas=' + JSON.stringify(productDatas),
				})
			},
			present() {
				uni.navigateTo({
					url: './businessDetailsPresent/businessDetailsPresent'
				})
			},
			firstLoadImagUlr(icon){
				var that = this;
				var iconObj={path:'',loaded:false};
				iconObj.path = '/static/images/load_fial_image.png'; 
				iconObj.loaded = false;
				
				var tempImagePath = uni.getStorageSync('tempImagePath');
				if (tempImagePath && tempImagePath[icon]) {
					iconObj.path = tempImagePath[icon];
					iconObj.loaded = true;										
				} 
				else {
					let options = {
						url:httpRequest.requestUrl.imageUrl + icon						
					};
					
					httpRequest.DownloadFile(options).then(res => {						
						if(res.statusCode == 200){							
							var tempImagePath = uni.getStorageSync('tempImagePath');
							if (tempImagePath && tempImagePath[icon]) {								
							    iconObj.path = tempImagePath[icon];
							    iconObj.loaded = true;	
								that.productData.imgLoaded = true;																							
							}							
						}						
					})
				}
				if(!that.productImages[icon])
				{
					that.productImages[icon] = iconObj;
				}
				if(that.productImages[icon].path != iconObj.path)
				{
					that.productImages[icon].path = iconObj.path;
				}
				if(that.productImages[icon].loaded != iconObj.loaded)
				{
					that.productImages[icon].loaded = iconObj.loaded;
				}
				return that.productImages[icon].loaded;
			},
			getImgUrl(icon){
				console.log('图片获取...')
				var self = this;
				var iconObj={path:'',loaded:false};
				iconObj.path = '/static/images/load_fial_image.png'; 
				iconObj.loaded = false;
				var tempImagePath = uni.getStorageSync('tempImagePath');
				if (tempImagePath && tempImagePath[icon]) {
					iconObj.path = tempImagePath[icon];
					iconObj.loaded = true;
				}
				if(!self.productImages[icon])
				{
					self.productImages[icon] = iconObj;
				}	
				return self.productImages[icon].path;
			},
			addShopingCart(){
				var self = this;
				if(self.isAddShoppingCart){
					console.log('return....')
					return;
				}
				var shoppingCarts = self.shoppingCarts;
				if(!shoppingCarts){
					shoppingCarts = new Array();
				}
				shoppingCarts.push(self.productData);
				uni.setStorageSync('shoppingCart', shoppingCarts);
				self.isAddShoppingCart = true;
				console.log('addshoppingCart....')
			}
		}
	}
</script>

<style scoped>
	.top {
		width: 100%;
		height: 320rpx;
	}

	.top image {
		width: 100%;
		height: 320rpx;
	}

	.mid {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.mid-top {
		width: 100%;
		height: 140rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}

	.mid-top>text {
		width: 90%;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #161616;
	}

	.mid-top-top {
		width: 90%;
		display: flex;
		align-items: center;
	}

	.mid-top-top>text {
		width: 86rpx;
		height: 48rpx;
		opacity: 1;
		border-radius: 4rpx;
		text-align: center;
		line-height: 48rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		background-color: #00B9EF;
	}

	.money {
		width: 260rpx;
		height: 56rpx;
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 56rpx;
		color: #FF1F1F;
		opacity: 1;
	}

	.mid-bottom {
		width: 100%;
		height: 132rpx;
		display: flex;
		align-items: center;
		background: #F1F1F1;
	}

	.mid-bottom-content {
		width: 100%;
		height: 88rpx;
		background: #FFFFFF;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.mid-bottom-content>text {
		width: 86rpx;
		height: 48rpx;
		border: 2rpx solid #FF0000;
		opacity: 1;
		text-align: center;
		line-height: 48rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FF0000;
	}

	.content-blue {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #00B9EF;
		opacity: 1;
	}

	.content-red {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FF0000;
		opacity: 1;
	}

	.section {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.section1 {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #e5e5e5;
	}

	.word {
		width: 30%;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		color: #A9A9A9;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
	}

	.name {
		width: 70%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #030303;
	}

	.section2 {
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-bottom: 100rpx;
	}

	.include {
		width: 100%;
		display: flex;
		flex-wrap: nowrap;
		/*换行，第一行在上方*/
		flex-wrap: wrap;
		/*换行，第一行在下方*/
		/* flex-wrap: wrap-reverse; */
	}

	.title {
		width: 300rpx;
		height: 68rpx;
		background: #F3F3F3;
		opacity: 1;
		border-radius: 68rpx;
		font-size: 15px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #00B9EF;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 50rpx;
		margin-top: 20rpx;
	}

	.bottom {
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		z-index: 1010;
		display: flex;
	}

	.bottom-left {
		width: 50%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background-color: #FFFFFF;
		color: #000000;
		font-size: 34rpx;
	}

	.bottom-left1 {
		width: 50%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background-color: #A9A9A9;
		color: #808080;
		font-size: 34rpx;
	}

	.bottom-right {
		width: 50%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background-color: #FF0000;
		font-size: 34rpx;
		color: #FFFFFF;
	}
	.buy-now-layout {
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		display: flex;
		height: 100rpx;
		z-index: 1010;
		flex-direction: row;
	}	
	.add-shoping-cart{
		flex: 1;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: white;
		color: red;
		border: 2rpx solid red;
		border-radius: 0px;
	}
	.immediately-buy-now {
	  flex: 1;
	  height: 100%;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  color: white;
	  background-color: red;
	  border: 2rpx solid red;
	  border-radius: 0px;
	}
	
	.immediately-buy-now::after {
	  border: none;
	}
	
	.immediately-buy-now-hover {
	  background-color: #dc143c;
	}
</style>
